
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, View} from "../../../script/frame/apiModel/gui/React";
import TaskBar from "./TaskBar";
import {TaskApplyData, TypeTaskRet} from "../../../script/type/Type";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {ConfigKey} from "../../../script/constant/ConfigConstant";
import {TaskButtonInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {Logger} from "../../../script/frame/apiModel/config/Logger";

export interface IProp {
    getTaskFun: (player: PlayerModel) => TypeTaskRet;
    getApplyTaskFun: (player: PlayerModel) => { [taskId: string]: TaskApplyData };
}
export interface IState {
    taskVisible: boolean;
    taskApplyDatas: { [taskId: string]: TaskApplyData };
    taskDatas: TypeTaskRet;
}

export default class TaskButton extends TaskButtonInterface<IProp, IState> {

    constructor(props: IProps & IProp) {
        super(props);
        const barVisible = ( Configer.getConfig(ConfigKey.autoOpenTask) > 0 )

        this.state = {
            taskDatas: undefined,
            taskVisible: barVisible,
            taskApplyDatas: {},
            visible: true,
        }
    }

    render = () => {
        const taskTitle = Configer.getResource(ResourceKey.taskButtonTitle);
        let taskButton
        if (this.state.taskVisible) {
            taskButton = Configer.getResource(ResourceKey.taskButtonRight)
        } else {
            taskButton = Configer.getResource(ResourceKey.taskButtonLeft);
        }

        const taskButtonY = Configer.getUIConfig(UIConfigKey.taskButtonY)


        const size = { h: 0.03, w: 0.12 };

        const buttonSize = { h: 0.02, w: 0.01 };
        const pos = { x: 1 - size.w, y: taskButtonY - size.h };

        return <View key={GuiKeys.taskButton} style={{ backgroundImage: taskTitle, left: pos.x, top: pos.y, width: size.w, height: size.h }}>
            <View onMouseDown={this.showTask} key={GuiKeys.taskButton} style={{ backgroundImage: taskButton, width: buttonSize.w, height: buttonSize.h, marginT: 0.005, marginL: 0.1 }}>
                <TaskBar   key={GuiKeys.taskBar} hidden={!this.state.taskVisible} taskApplyDatas={this.state.taskApplyDatas} taskDatas={this.state.taskDatas}></TaskBar>
            </View>
        </View>
    }

    showTask = () => {
        this.setState({
            ...this.state,
            taskVisible: !this.state.taskVisible
        })
    }

    reflushTask = () => {
        let taskDatas = this.props.getTaskFun(PlayerFactory.getInstance().getLocalPlayer())
        let taskApplyDatas = this.props.getApplyTaskFun(PlayerFactory.getInstance().getLocalPlayer());
        taskDatas = JSON.parse(JSON.stringify(taskDatas));
        taskApplyDatas = JSON.parse(JSON.stringify(taskApplyDatas));
        this.setState({
            ...this.state,
            taskDatas,
            taskApplyDatas,
        })
        // Logger.toastError(JSON.stringify(this.state));
    }

}